<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="button" value="亮起来" @click="lang">
        <input type="button" value="低调" @click="stop">
        <h4>{{msg}}</h4>

    </div>

    <script>
    //在VM实例中，想要获取data上的数据，或者想调用methods中方法，必须通过this.数据属性名 或this.方法名 来访问，这里的this,表示new 出来的VM实例对象。
     var vm =new Vue({
         el:'#app',
         data:{
             msg:'傻傻的，分不清  ',
             intervalId:null //在data上定义，定时器Id

         },
        methods:{
            lang:function(){
                //if(this.intervalId != null) return
                this.stop()
                 this.intervalId =setInterval(() => {

                console.log(this.msg)
                //获取到头的第一个字符
                var start =this.msg.substring(0,1)
                //获取到后面的所有字符
                var end =this.msg.substring(1)
                //重新拼接得到新的字符串，并赋值给 this.msg
                this.msg= end + start
                    
                }, 100)
                

                },
                stop(){
                //停止定时器
                clearInterval(this.intervalId)
                //每当清除了定时器之后，需要重新把 inervalId 设置为null
                //this.intervalId = null;

            }
                
                //VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把最新的数据，从data上同步到页面中去；
                //好处：只需要关心数据，不需要考虑如何重新渲染到页面。
            

            }
        
        })
    
    </script>
    
</body>
</html>